<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>task6</title>
	<style type="text/css">
	.container{
		width: 980px;
		height: 1386px;
	}
	.main{
		width: 892px;
		height: 1264px;
		border-top: 2px solid;
		border-bottom: 2px solid;
		border-color: #938e8c;
		margin:0px 44px;
	}
	.logo{
		width: 110px;
		height: 61px;
		background-color: red;
		margin-left: 44px;
		position: relative;
	}
	.logo p{
		font-size: 12px;
		color: #ffffff;
		font-family: 黑体;
		margin: 0px;
		position: absolute;
		bottom: 2px;
		left: 2px;
	}
	.first{
		width: 100%;
		height: 301px;
		margin:20px 0px;
	}
	.first .fleft{
		background-image: url(pic6.1.jpg);
		width: 641px;
		height: 301px;
		position: relative;
		float: left;
	}
	.first .fleft .green{
		width: 191px;
		height: 301px;
		background-color: green;
		opacity: 0.3;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.first .fleft .red{
		width: 191px;
		height: 301px;
		background-color: red;
		opacity: 0.3;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	.first .fright{
		width: 203px;
		height: 301px;
		border-top: 2px solid;
		border-color: #cc8091;
		margin-left: 48px;
		float: left;
	}
	.first .fright .upper:first-letter{
		vertical-align:baseline;
		font-size: 1.5em;


	}
	.first .fright .upper{
		font-size: 24px;
		color: #000000;
		text-transform:uppercase;
		text-decoration: underline;
		margin: 0px;

	}
	.first .fright .small{
		font-size: 12px;
		color: #676767;
		margin: 10px 0px;
	}
	.first .fright .big{
		font-size: 90px;
		color: #75b86b;
		font-style: italic;
		margin: 0px;
	}
	.first .fright .middle{
		ont-size: 21px;
	}
	.first .middle .td1{
		font-size: 55px;
		color: #cc8091;
	}
	.first .middle .td2{
		font-size: 21px;
		color: #cc8091;
	}
	.first .middle .td2 span{
		font-size: 12px;
		color: gray;
	}
	.second{
		width: 641px;
		height: 301px;
	}
	.second .what{
		width: 200px;
		float: left;
		margin-right: 2px;
	}
	.what h3{
		font-size: 16px;
		color: #418c59;
		text-decoration: underline;
	}
	.second .when{
		width: 180px;
		float: left;
		margin-right: 2px;
	}
	.when h3{
		font-size: 16px;
		color: #d2994f;
		text-decoration: underline;
	}
	.second .how{
		width: 160px;
		float: left;
	}
	.how h3{
		font-size: 16px;
		color: #cc7680;
		text-decoration: underline;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="logo">
			<p>ife.baidu.com</p>
		</div>

		<div class="main">
			<div class="first">
				<div class="fleft">
					<div class="green"></div>
					<div class="red"></div>
				</div>
				<div class="fright">
					<p class="upper">about</p>
					<p class="upper">technologe</p>
					<p class="small">About technologe about technologe about technologe</p>
					<p class="big">700</p>
					<div class="middle">
						<table>
							<tr>
								<td class="td1">3.2</td>
								<td class="td2">css<br/><span>cssssscsssss</span></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="second">
				<div class="what">
					<h3>What</h3>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
				</div>
				<div class="when">
					<h3>When</h3>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
				</div>
				<div class="how">
					<h3>How</h3>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端</p>
					<p>what</p>
					<p>how</p>
					<p>when</p>
				</div>
			</div>
			<div class="third"></div>
		</div>
		
	</div>
</body>
</html>